<template>
  <!-- :id="sid" -->
  <div class="map-overflow-container map-marker" @click="clickAction" @mouseenter="markerMouseEnter($event)" @mouseleave="markerMouseLeave($event)">
    <div :is="component" :data="data"></div>
  </div>
</template>

<script>
export default {
  name: 'MapMarker',
  data() {
    return {
      // data: data,
      // component: 'Zujian'
    }
  },
  methods: {
    // 点击 click 触发的方法
    clickAction() {
    },
    markerMouseEnter(event) {
      /* $('.map-marker').parent().removeClass('amap-marker-current')
      $(event.target).closest('.map-marker').parent().addClass('amap-marker-current') */
      const currentDom = this.$el
      console.log(currentDom)
      currentDom.parentElement.classList.remove('amap-marker-current')
      currentDom.closest('.map-marker').parentElement.classList.add('amap-marker-current')
    },
    markerMouseLeave(event) {
      // $('.amap-marker').parent().removeClass('amap-marker-current')
      document.querySelector('.amap-marker').parent().removeClass('amap-marker-current')
    }
  }
}
</script>
